<template>
	<div>
		<ElForm :model="order_insert">
			<ElFormItem>
				<ElButton type="text" disabled style="width: 50px">合 约</ElButton>
				<el-cascader v-model="sub" :show-all-levels="false" :options="optionInstrument" filterable />
			</ElFormItem>
			<ElFormItem>
				<ElButton type="text" disabled style="width: 50px">开 平</ElButton>
				<ElRadioGroup v-model="order_insert.Offset" size="small">
					<ElRadio label="0">开仓</ElRadio>
					<ElRadio label="1">平仓</ElRadio>
					<ElRadio label="3">平今</ElRadio>
				</ElRadioGroup>
				<!-- <ElSelect v-model="order_insert.Offset" style="width: 80px">
					<ElOption label="开仓" value="0" />
					<ElOption label="平仓" value="1" />
					<ElOption label="平今" value="3" />
				</ElSelect> -->
			</ElFormItem>
			<ElFormItem>
				<ElButton :type="followPrice ? 'success' : 'danger'" plain style="width: 50px" @click="chgPrice()">{{ followPrice ? '跟盘价' : '指定价' }}</ElButton>
				<ElInputNumber v-model="order_insert.Price" :precision="2" :disabled="followPrice" />
			</ElFormItem>
			<ElFormItem>
				<ElButton type="text" disabled style="width: 50px">手 数</ElButton>
				<ElInputNumber v-model="order_insert.Volume" :precision="0" />
			</ElFormItem>
			<ElButton type="danger" style="width: 60px" @click="submit('0')">买</ElButton>
			<ElButton type="success" style="width: 60px" @click="submit('1')">卖</ElButton>
		</ElForm>
	</div>
</template>

<script setup lang="ts">
const followPrice = ref(true)
const chgPrice = () => (followPrice.value = !followPrice.value)

// 行情
const subInstrument = ref('')
const sub = ref<string[]>([])
watch(sub, async (newVal, oldVal) => {
	// 级联组件返回数组
	order_insert.value.Price = 0

	if (newVal && newVal.length === 3) {
		const inst = newVal[2]
		if (inst.length < 5) {
			return
		}
		subInstrument.value = inst
		useCookie('instrument').value = inst
		if (oldVal && oldVal.length > 0) {
			useHttp.post('/unsubscript', { instrument_id: [oldVal[2]] })
		}
		useHttp.post('/subscript', { instrument_id: [inst] })
	}
})

const { data: tick } = useSSE('tick')
watch(tick, (val) => {
	if (followPrice.value) {
		// 跟盘价
		const t = JSON.parse(val as string)
		if (t.InstrumentID === subInstrument.value) order_insert.value.Price = t.LastPrice
	}
})

// 委托
const order_insert = ref<OrderInsert>({ Offset: '0', Volume: 1 } as any)
const submit = (dire: string) => {
	order_insert.value.Director = dire
	order_insert.value.InstrumentID = subInstrument.value
	useHttp.post<boolean>('/order', order_insert.value).then(({ data }) => {
		if (data.value) ElMessage.success('下单成功')
	})
}

const optionInstrument = ref([{}])

// 加载页面时读取合约信息
onMounted(async () => {
	// 启动时读取合约
	await useHttp.get<InstrumentField[]>('/instrument', { product_class: '1' }).then(({ data }) => {
		if (data.value) {
			// 取 cookie 中的合约
			const subInst = data.value.find((x) => x.InstrumentID === useCookie('instrument').value)
			if (subInst) {
				subInstrument.value = subInst.InstrumentID
				;(sub.value as any) = subInst.InstrumentID
				useHttp.post('/subscript', { instrument_id: [subInst.InstrumentID] })
			}

			// 按合约排序
			data.value.sort((a, b) => {
				return a.InstrumentID > b.InstrumentID ? 1 : -1
			})
			const groupedArray: {}[] = data.value.reduce((groups, inst) => {
				// 结构由后面的 as 确定
				const existingExchange = groups.find((group) => group.label === inst.ExchangeID)
				if (existingExchange) {
					existingExchange.value = inst.ExchangeID
					// 过滤重复品种
					const existingProduct = existingExchange.children.find((g) => g.label === inst.ProductID)
					if (existingProduct) existingProduct.children.push({ label: inst.InstrumentID, value: inst.InstrumentID })
					else {
						existingExchange.children.push({ label: inst.ProductID, value: inst.ProductID, children: [{ label: inst.InstrumentID, value: inst.InstrumentID }] })
					}
				} else {
					groups.push({ label: inst.ExchangeID, value: inst.ExchangeID, children: [{ label: inst.ProductID, value: inst.ProductID, children: [{ label: inst.InstrumentID, value: inst.InstrumentID }] }] })
				}
				return groups
			}, [] as { label: string; value: string; children: [{ label: string; value: string; children: [{ label: string; value: string }] }] }[])

			optionInstrument.value = groupedArray
		}
	})
})
</script>

<style scoped></style>
